import React, {Component} from 'react';
import classNames from 'classnames';
import {connect} from 'react-redux';
import {Route, Redirect, Switch} from 'react-router';
import {Dropdown, Icon, Layout, LocaleProvider, Menu} from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import Bread from '@/layouts/Bread';
import Menus from '@/layouts/Menus';

import {fetchMenu} from './AppRedux';
import {logout} from './LoginRedux';

import LazyLoad from '@/components/shared/LazyLoad';
import TabView from '@/views/TabView';
import BarsView from '@/views/BarsView';
import ForwardRef from '@/views/ForwardRef';
import Context from '@/views/Context';
import Hook from '@/views/Hook';
import Children from '@/views/Children';

import css from './App.less';

const {Item, Divider} = Menu;
const {Header, Content, Sider} = Layout;
const Home = LazyLoad('containers/Home');
const CommentApp = LazyLoad('containers/CommentApp');
const UserList = LazyLoad('containers/UserList');
const NoPermission = LazyLoad('components/ErrorPage/403');
const NotFound = LazyLoad('components/ErrorPage/404');

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    const { menu, user, fetchMenu } = this.props;
    if (!menu || !menu.length) {
      fetchMenu(user.id);
    }
  }

  _hasPermission(pathname) {
    const { menu } = this.props;
    if (!menu || !menu.length) {
      return false;
    }
    const menus = menu.map(item => item.route.replace(/^\//, ''));
    const paths = pathname.split('/').filter(item => !!item);
    return paths.some((item) => {
      if (!menus.includes(item)) {
        return false;
      }
      return true;
    });
  }

  onEnter(Component, props) {
    if (this._hasPermission(props.location.pathname)) {
      return <Component {...props} />;
    }
    return <Redirect to="/no-permission" />;
  }

  handleLogout() {
    this.props.logout();
  }

  render() {
    const {user, menu} = this.props;
    return (
      <LocaleProvider locale={zhCN}>
        <Layout className={css.layout}>
          <Header>
            <div className={css.logo}>
              <img src={require('../../assets/logo.svg')} alt=""/>
              <span>React学习</span>
            </div>
            <Dropdown
              trigger={['click']}
              overlay={
                <Menu className={css['dropdown-menu']}>
                  <Item className={css['dropdown-menu-item']}>
                  </Item>
                  <Item className={css['dropdown-menu-item']}>
                  </Item>
                  <Divider></Divider>
                  <Item className={css['dropdown-menu-item']}>
                    <a className={css.link} onClick={this.handleLogout.bind(this)}>
                      <Icon type="logout" />
                      退出登录
                    </a>
                  </Item>
                </Menu>
              }>
              <a className={classNames(css.user, css.pointer)}>
                {user.username}
                <Icon type="down" className={css.icon} />
              </a>
            </Dropdown>
          </Header>
          <Layout className={css.main}>
            <Sider className={css['side-menu']}>
              <Menus
                menus={menu}
                location={this.props.location}
              />
            </Sider>
            <Layout>
              <Bread
                menus={menu}
                location={this.props.location}
              />
              <Content className={css['main-container']}>
                <Switch>
                  <Redirect exact from="/" to="/home"></Redirect>
                  <Route path="/home" component={Home} />
                  <Route path="/demo/comment-app" component={CommentApp} />
                  <Route path="/demo/users" component={UserList} />
                  <Route path="/svg/bars" component={BarsView} />
                  <Route path="/no-permission" component={NoPermission} />
                  <Route component={NotFound} />
                </Switch>
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </LocaleProvider>
    )
  }
}

export default connect(state => ({
  menu: state.app.menu,
  user: state.login.user,
}), {fetchMenu, logout})(App);
